<template>
  <div>
    <div class="layer-loading" v-show="loading"><i></i><i></i><i></i></div>
    <div class="container container-small">
      <div class="d-flex align-items-center">
        <!-- Nav tabs -->
        <ul class="nav nav-tabs nav-line mb-4" style="display: none" role="tablist">
          <li class="nav-item">
            <router-link to="/teachers/all" class="nav-link" data-toggle="tab" data-target="#all" role="tab">全部</router-link>
          </li>
          <li class="nav-item">
            <router-link to="/teachers/general" class="nav-link active" data-toggle="tab" data-target="#profile9" role="tab">通用素质</router-link>
          </li>
          <li class="nav-item">
            <router-link to="/teachers/skill" class="nav-link" data-toggle="tab" data-target="#messages9" role="tab">专业技能</router-link>
          </li>
          <li class="nav-item">
            <router-link to="/teachers/feature" class="nav-link" data-toggle="tab" data-target="#messages9" role="tab">行业特色</router-link>
          </li>
          <li class="nav-item">
            <router-link to="/teachers/other" class="nav-link" data-toggle="tab" data-target="#messages9" role="tab">其他</router-link>
          </li>
        </ul>
        <div class="mb-4 mt-4 w-100">
          <div class="input-group search rad-3 of-hidden">
            <input class="form-control border-0" placeholder="讲师名称、定位、课程" v-model="content" @keyup.enter="search">
            <span class="pointer px-3 py-2 bg-white font-xxl" @click="search"><i class="fa fa-search text-grey"></i></span>
          </div>
        </div>
      </div>
      <div class="row relative pt-2" style="min-height: 36.5rem;">
        <router-link :to="'/teacher/' + item.providerId" class="col-lg-4 mb-3 text-dark " v-for="item in page.list">
          <div class="bg-covered teachers py-3">
            <div class="avater-teacher  bg-covered mt-2 b-eee" :style="{backgroundImage: 'url(' + (item.imgUrl || '/static/img/index/pic_yyzh.png') + ')'}"></div>
            <div class="text-lg-center mt-4 px-3">
              <h5>{{item.pname}}</h5>
              <div class="line-clamp">{{item.introduce}}</div>
            </div>
          </div>
        </router-link>
      </div>
      <div class="my-4 text-center">
        <button v-show="pn!=1" class="btn btn-outline-danger btn-paging mr-2 my-3 align-middle " @click="paging(0)">上一页</button>
        <span v-if="page.lastPage" class="btn btn-paging" disabled>没有更多了...</span>
        <button v-else class="btn btn-outline-danger btn-paging my-3 mr-3" @click="paging(1)">下一页</button>
      </div>
    </div>
  </div>
</template>
<!--
  讲师中心
-->
<script>

  import {Teachers} from '../resources'
  export default {
    name: 'teachers',
    data: () => ({
      loading: true,
      page: {
        list: []
      },
      pn: 1,
      pageSize: 12,
      content: ''
    }),
    beforeRouteEnter (to, from, next) {
      Teachers.trend({pageNo: 1, pageSize: 12, pType: 1}).then(response => {
        next(vm => {
          vm.page.list = response.data.data.list ? response.data.data.list : []
          vm.$nextTick(() => {
            vm.loading = false
            vm.$emit('loaded')
          })
        })
      })
    },
    beforeRouteUpdate (to, from, next) {
      this.$nextTick(() => this.$emit('loaded'))
      next()
    },
    methods: {
      paging (next) {
        this.loading = 1
        if (next) {
          ++this.pn
        } else {
          --this.pn
        }

        this.updateInfo()
      },
      search (){
        this.pn = 1
        this.updateInfo()
      },
      updateInfo () {
        this.loading = 1

        Teachers.trend({pageNo: this.pn, pageSize: 12, pType: 1, content: this.content}).then(response => {
          this.page = response.data.data

          if (this.pn >= Math.ceil(this.page.totalCount / this.pageSize)) {
            this.page.lastPage = true
          } else {
            this.page.lastPage = false
          }

          this.$nextTick(() => this.loading = 0)
        })

      }
    }
  }
</script>

<style>
  .nav-tabs .nav-link {
    color: #333;
    font-weight: bold;
    font-size: 1.1rem;
    padding: 1.5rem 2rem;
  }
  .nav-link.active {
    color: #e50011 !important;
  }
  .search .form-control {
    padding: .6rem .75rem;
  }
  .teachers {
    background-color: #FFFFFF;
    border-radius: .25rem;
    position: relative;
    overflow: hidden;
    height: 100%;
  }
  .intro {
    background: rgba(0, 0, 0, .7);
    -webkit-transition: margin .3s;
    transition: margin .3s;
    margin-bottom: -50px;
    position: absolute;
    padding: .5rem;
    color: #fff;
    width: 100%;
    bottom: 0;
  }
  /*.teachers:hover .intro {*/
    /*margin-bottom: 0;*/
  /*}*/
  /*.intro .btn {*/
    /*padding: .25rem 4rem;*/
  /*}*/
  /*.intro .btn:hover {*/
    /*background: #fff;*/
    /*color: #e50011;*/
  /*}*/
  .btn-paging {
    border-color: #d8d8d8;
    color: #8d8d8d;
    padding: .5rem 10rem
  }
  .avater-teacher {
    width: 7rem;
    height: 7rem;
    border-radius: 50%;
    margin-left: auto;
    margin-right: auto;
  }
</style>